<template>
    <div class="body">
        <div class="main">
            <div class="title">
                <i class="iconfont icon-zhuce"></i>
            </div>

            <form class="registered" action="javascript:" method="post">
                <div>
                    <label>账号：</label>
                    <input type="text" autocomplete="off" class="edit-text" v-model="accountId" />
                </div>
                <div>
                    <label>密码：</label>
                    <input type="password" class="edit-text" v-model="accountPwd1" />
                </div>
                <div>
                    <label>确认密码：</label>
                    <input type="password" class="edit-text" v-model="accountPwd2" />
                </div>
                <div>
                    <input type="submit" class="button-registered" value="注册" @click="userRegister" />
                </div>
            </form>

            <div class="bottom">
                <router-link class="link" to="/login">已有账号，点我登录</router-link>
                <a href="javascript:" class="link">找回密码</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            accountId: "",
            accountPwd1: "",
            accountPwd2: "",
        };
    },
    methods: {
        async userRegister() {
            if (this.accountPwd1 !== this.accountPwd2) {
                this.$message({
                    message: "两次密码输入应该一致！",
                    type: "error",
                });
                this.accountPwd1 = "";
                this.accountPwd2 = "";
                return;
            }
            try {
                const account = {
                    accountId: this.accountId,
                    accountPwd: this.accountPwd1,
                };
                await this.$store.dispatch(
                    "user/userRegister",
                    account
                );
                this.$message({
                    message: "恭喜您，注册成功",
                    type: "success",
                });
                this.$router.push("home");
            } catch (error) {
                this.$message({
                    message: error,
                    type: "error",
                });
            }
        },
    },
};
</script>

<style scoped>
.body {
    background-image: url("/public/images/bg1.png");
    background-size: 100%;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    background-color: rgba(255, 255, 255, 0.9);
    width: 510px;
    height: 480px;
    border-radius: 40px;
    box-shadow: 0 10px 10px rgba(255, 255, 255, 0.9);
}

.title {
    width: 420px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid rgb(60, 63, 65);
}

.title i {
    font-size: 60px;
    line-height: 100px;
}

.main .registered {
    width: 440px;
    height: 280px;
    margin: 30px auto 0;
    text-align: center;
    border-bottom: 1px solid rgb(229, 229, 229);
}

.main .registered .edit-text {
    width: 240px;
    height: 30px;
    margin: 15px auto;
    font-size: 15px;
    line-height: 30px;
    border: none;
    border-bottom: 1px solid rgb(229, 229, 229);
    outline: none;
}

.main .registered div:nth-child(3) {
    position: relative;
    left: -17px;
}

.main .registered .edit-text:hover {
    border-bottom: 1px solid rgb(193, 193, 193);
}

.main .registered .edit-text:focus {
    color: rgb(18, 183, 245);
    border: none;
    border-bottom: 1px solid rgb(18, 183, 245);
}

.button-registered {
    display: block;
    background-image: linear-gradient(
        to top,
        rgb(0, 182, 250),
        rgb(11, 194, 255)
    );
    color: white;
    font-size: 16px;
    line-height: 30px;
    width: 260px;
    height: 35px;
    margin: 20px 100px 0px;
    box-shadow: 0 0 5px rgb(11, 194, 255);
    border: none;
}

.button-registered:hover {
    background-image: linear-gradient(
        to top,
        rgb(26, 194, 251),
        rgb(34, 203, 255)
    );
}

.button-registered:active {
    background-image: linear-gradient(
        to top,
        rgb(10, 160, 251),
        rgb(20, 170, 255)
    );
}

.bottom div {
    margin: 20px 40px 10px;
    color: #666;
}

.bottom .link {
    text-decoration: none;
    color: #666;
    float: right;
    margin-right: 40px;
    font-size: 16px;
    margin-top: 30px;
}

.bottom .link:hover {
    color: rgb(10, 160, 251);
}
</style>